<template>
    <ul class="list">
        <li class="item"
            v-for="(item,key) of cities"
            :key="key"
            @click="handleLetterClick"
        >{{key}}</li>
    </ul>
</template>
<script>
export default {
    name:'Alphabet',
    props:{
        cities:Object
    },
    data(){
        return{
            touchStatus : false
        }
    },
    computed:{
        letters(){
            const letters = [];
            for(let i in this.cities){
                letters.push(i);
            }
            return letters;
        }
    },
    methods:{
        handleLetterClick:function(e){
            //console.log(e.target.innerText);
            this.$emit('change',e.target.innerText);
        },
        // handleTouchStart:function(e){
        //     this.touchStatus = true;
        // },
        // handleTouchMove:function(e){
        //     if(this.touchStatus){
        //         console.log(this.$refs['A'][0]);
        //         const startY = this.$refs['A'][0].offsetTop;
        //         console.log(startY);
        //     }
        // },
        // handleTouchEnd:function(e){
        //     this.touchStatus = false;
        // }
    }
}
</script>
<style lang="scss" scoped>
@import '~styles/varibles.scss';
.list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top:1.58rem;
    right:0;
    bottom:0;
    width:.4rem;
    .item{
        line-height: .4rem;
        text-align: center;
        color: $themeBgColor;
    }
}
</style>